<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import tabbar from '@/components/tabbar.vue'
import navbar from '@/components/navbar.vue'
const router = useRouter()
const activeNames = ref(['1'])
const showPopover = ref(false)

// 通过 actions 属性来定义菜单选项
const actions = [{ text: '订单' }, { text: '时间' }, { text: '交易品种' }]
const onSelect = (action) => {}

// defineProps<{ msg: string }>()

// const username = ref('')
// const password = ref('')
// ruoter

onMounted(() => {
  // showDialog({
  //   message: '你当前不具备支付督察信息员资格！\n请进行资格申请',
  //   theme: 'round-button',
  //   confirmButtonText: '申请资格'
  // }).then(() => {
  //   // on close
  //   router.push({ path: 'application' })
  // })
})
</script>

<template>
  <navbar title="交易">
    <template #right>
      <div style="display: flex">
        <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect" placement="bottom-end">
          <template #reference>
            <!-- <van-icon name="sort" style="color: #fff; font-size: 22px" /> -->
            <span class="iconfont icon-paixu" style="color: #fff; font-size: 22px"></span>

          </template>
        </van-popover>
        <!-- <van-icon name="plus" style="color: #fff; font-size: 22px;margin-left: 10px;" /> -->
        <span class="iconfont icon-jiaoyijilu1" style="color: #fff; font-size: 22px;margin-left: 10px;" @click="router.push({ path: '/currency' })" ></span>

      </div>
    </template>
  </navbar>
  <van-notice-bar color="#fff" background="#dd3628a3"> <van-icon name="balance-o" style="font-size: 18px;"/> -20.66USD </van-notice-bar>
  <!-- 内容 -->
  <div class="page">
<div class="info">
  <div class="info-box">
      <div class="title">结余</div>
      <div class="num">200000.00</div>
    </div>
    <div class="info-box">
      <div class="title">净值</div>
      <div class="num">200000.00</div>
    </div>
    <div class="info-box">
      <div class="title">预付款</div>
      <div class="num">200000.00</div>
    </div>
    <div class="info-box">
      <div class="title">可用预付款</div>
      <div class="num">200000.00</div>
    </div>
    <div class="info-box">
      <div class="title">预付款比例（%）</div>
      <div class="num">200000.00</div>
    </div>
</div>
  </div>
  <van-notice-bar color="#333" background="#F7F7F7"> 价位 </van-notice-bar>
  <van-collapse v-model="activeNames">
    <van-collapse-item name="1">
      <template #title>
        <div class="bot-box">
          <div class="box-l">
            <span>AUDJPY,<i>buy 1.00</i></span>
            <p>97.55 -> 97.999</p>
          </div>
          <div class="box-r">-8.8</div>
        </div>
      </template>
      <div class="list-content">
        <div class="time">2024-01-10 12:04:43</div>
        <div class="list-num">
          <div class="list-num-each"><span>止损:</span><span>1.20</span></div>
          <div class="list-num-each"><span>库存费：</span><span>32.11</span></div>
          <div class="list-num-each"><span>获利:</span><span>32.11</span></div>
          <div class="list-num-each"><span></span><span>#1233</span></div>
        </div>
      </div>
    </van-collapse-item>
    <van-collapse-item name="2">
      <template #title>
        <div class="bot-box">
          <div class="box-l">
            <span>AUDJPY,<i>buy 1.00</i></span>
            <p>97.55 -> 97.999</p>
          </div>
          <div class="box-r">-8.8</div>
        </div>
      </template>
      <div class="list-content">
        <div class="time">2024-01-10 12:04:43</div>
        <div class="list-num">
          <div class="list-num-each"><span>止损:</span><span>1.20</span></div>
          <div class="list-num-each"><span>库存费：</span><span>32.11</span></div>
          <div class="list-num-each"><span>获利:</span><span>32.11</span></div>
          <div class="list-num-each"><span></span><span>#1233</span></div>
        </div>
      </div>
    </van-collapse-item>
  </van-collapse>

  <tabbar />
</template>

<style scoped lang="scss">
.title {
  position: relative;
  overflow: hidden;
  font-size: 14px;
  color: #999;
}
.page {
  padding: 10px;
}

.info-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  // z-index: 9;

  &::after {
    position: absolute;
    content: '';
    // border-bottom: 1px dashed #ccc;
    top: 50%;
    left: 0;
    right: 0;
  }
  .title {
    position: relative;
    overflow: hidden;
    font-size: 14px;
    width: 100%;
    color: #333;
  }
  .title::after {
    content: '';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed #ccc;
    position: absolute;
    top: 50%;
  }
  .title::after {
    margin-left: 10px;
  }
  .num {
    font-size: 15px;
    color: #1d74c8;
    padding-left: 10px;
  }
}

.list-content .time {
    color: #c0c0c4
}
.list-content .list-num {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.list-content .list-num .list-num-each {
    display: flex;
    justify-content: space-between;
    flex-shrink: 1;
    width: calc(50% - 10px);
}

.list-content .list-num .list-num-each>span:first-child {
    margin-right: 10px
}

.bot-box {
  display: flex;
  justify-content: space-between;
  // padding: 10px;
  // align-items: center;
  position: relative;
  // &::after {
  //   content: '';
  //   border-bottom: 1px solid #f7f7f7;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   position: absolute;
  // }
  .box-l {
    width: 50%;
    font-size: 15px;
    font-weight: bold;
    p {
      color: #999;
      font-weight: bold;
    }
    i {
      font-style: normal;
      font-size: 14px;
      color: #157df8;
      font-weight: 100;
    }
    // background:#ccc;
  }
  .box-r {
    color: red;
    font-size: 18px;
  }
}

</style>
